<template>
    <div class="container" :style="'height: '+docheight+'px'">
      <leftcont></leftcont>
      <div class="righCont">
        <topcont></topcont>
        <div class="content">
          <div class="payTable">
            <div class="trendTop">即将过期器材({{ total }})</div>
            <div class="tableCont">
              <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  prop="equipment_code"
                  width="140"
                  show-overflow-tooltip
                  label="图号｜代号"
                >
                </el-table-column>
                <el-table-column
                  prop="equipment_name"
                  show-overflow-tooltip
                  label="器材名称"
                >
                </el-table-column>
                <el-table-column
                label="器材图片"
              >
              <template slot-scope="scope">
                <bigImg v-if="scope.row.equipment_image" :src="scope.row.equipment_image" height="40px"></bigImg>
                <!-- <img class="goodsImg" :src="scope.row.equipment_image" /> -->
                </template>
              </el-table-column>
                <el-table-column
                prop="person"
                  label="负责人"
                >
                </el-table-column>
                <el-table-column
                  label="所在区域"
                  prop="equipment_region"
                >
                </el-table-column>
                <el-table-column
                  prop="expiration_time"
                  label="到期时间"
                >
                </el-table-column>
                <el-table-column
                width="110"
                  prop="day"
                  label="剩余到期"
                >
                <template slot-scope="scope">
                <div class="ctrolBtn">
                  <div v-if="scope.row.day>20">{{ scope.row.day }}</div>
                  <div class="goldBtn" v-if="scope.row.day<=20&&scope.row.day>10">{{ scope.row.day }}(黄色预警)</div>
                  <div class="redBtn" v-if="scope.row.day<=10&&scope.row.day>0">{{ scope.row.day }}(红色预警)</div>
                  <div v-if="scope.row.day<=0">已过期</div>
                </div>
              </template>
                </el-table-column>
                <el-table-column
                  label="处理状态"
                >
                  <template slot-scope="scope">
                    <div class="ctrolBtn">
                      <div v-if="scope.row.is_zx==1">未标记</div>
                      <div class="greenBtn" v-if="scope.row.is_zx==2">已知晓</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  width="200"
                    label="操作">
                    <template slot-scope="scope">
                      <div class="ctrolBtn">
                        <div class="text_btn blueBtn" v-if="scope.row.is_zx==1" @click="readFn(scope.row)">知晓</div>
                        <div class="text_btn greenBtn" @click="toDetail(scope.row)">详情</div>
                      </div>
                    </template>
                  </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :page-size="per_page"
                  :current-page="page"
                  @current-change="pageFn"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
    import leftcont from '@/components/leftCont.vue'
    import topcont from '@/components/topCont.vue'
    import btn from '@/components/public/btn.vue'
    import {Warning,zxStatus} from "@/http/api"
    import bigImg from '@/components/public/bigImg.vue'

    export default {
      components: {bigImg,leftcont,topcont,btn},
      data() {
        return {
          tableData:[],
          page:1,
          per_page:5,
          total:0,
        }
      },
      props: {},
      methods:{
        pageFn(index){
          this.page = index
          this.getdata()
        },
        getdata(){
          var data ={
            page:this.page,
            per_page:this.per_page,
          }
          Warning(data).then((res)=>{
            if(res.data.code==1){
              this.tableData = res.data.data.data //把最新的数组赋值给tableData
              this.total = res.data.data.total
            }else{
              this.$message(res.data.msg)
            }
          }).catch((err)=>{
            this.$message('服务器请求超时');
          })
        },
        toDetail(item){
          this.$router.push({path:'/goodsAllDetail',query:{id:item.equipment_id}})
        },
        readFn(item){
          this.$confirm('确认标记此通知为已知晓状态吗, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(({  }) => {
            let data = {
              equipment_id:item.equipment_id,
            }
            this.showMask = false
            zxStatus(data).then((res)=>{
              if(res.data.code==1){
                this.$message({
                  type: 'success',
                  message: '标记成功!'
                });
                this.getdata()
              }else{
                this.$message(res.data.msg); 
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消归还'
            });       
          });
        },
      },
      mounted(){
      },
      created() {
        this.getdata()
      },
    }
  </script>
  
  <style scoped lang="less">
    .container{
      width: 100%;
      display: flex;
      overflow: hidden;
      .righCont{
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-left: 15px;
        height: 100%;
        width: 10px;
        background-color: #F4F8FF;
        .content{
          padding: 20px;
          box-sizing: border-box;
          width: 100%;
          flex: 1;
          overflow: auto;
          .payTable{
            margin-top: 20px;
            width: 100%;
            background-color: #fff;
            padding: 15px;
            box-sizing: border-box;
            .trendTop{
              font-weight: bold;
              font-size: 16px;
              cursor: pointer;
            }
            .tableCont{
              width: 100%;
              margin-top: 15px;
              .redBtn{
                  color: #F56C6C;
                }
                .blueBtn{
                  color: #96A1FE;
                }
                .greenBtn{
                  color: #85CE61;
                }
                .blackBtn{
                  color: #666;
                }
              .tableSerchCont{
                width: 100%;
                display: flex;
                justify-content: flex-end;
                margin-bottom: 10px;
                .serchItem{
                  width: 150px;
                  margin-left: 10px;
                }
                .headBtn{
                  margin-left: 10px;
                }
              }
              .goodsImg{
                height: 40px;
              }
              .ctrolBtn{
                display: flex;
                .text_btn{
                  margin: 0 5px;
                  cursor: pointer;
                  font-size: 14px;
                }
                .goldBtn{
                  color: goldenrod;
                }
                .redBtn{
                  color: #F56C6C;
                }
                
  
              }
              .pageCont{
                padding: 30px 0;
                display: flex;
                justify-content: center;
              }
            }
          }
        }
      }
    }
  </style>
  